<template>
  <!--Home的整体页码布局-->
  <el-container style="height: 100%">
    <!--左侧菜单-->
    <el-aside width="200px">
      <!--具体菜单-->
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#324158"
        text-color="#fff"
        active-text-color="#ffd04b"
        unique-opened
        style="border-right: none"
        router
      >
        <el-menu-item index="/welcome">
          <template slot="title">
            <i class="el-icon-s-home"></i>
            <span style="font-size: 14px">首页</span>
          </template>
        </el-menu-item>

        <!--菜单-->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-check"></i>
            <span>角色管理</span>
          </template>
          <!-- 二级菜单-->
          <el-menu-item index="/userHt">
            <template slot="title">
              <i class="el-icon-caret-right"></i>
              <span>用户列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/adminHt">
            <template slot="title">
              <i class="el-icon-caret-right"></i>
              <span>管理员列表</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!--考生信息管理-->
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-shopping-bag-1"></i>
            <span>考生信息管理</span>
          </template>
          <!-- 二级菜单-->
          <el-menu-item index="/studentHt">
            <template slot="title">
              <i class="el-icon-caret-right"></i>
              <span>考生信息列表</span>
            </template>
          </el-menu-item>
        </el-submenu>
        <!--城市管理-->
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-shopping-bag-1"></i>
            <span>公告管理</span>
          </template>
          <!-- 二级菜单-->
          <el-menu-item index="/afficheHt">
            <template slot="title">
              <i class="el-icon-caret-right"></i>
              <span>公告列表</span>
            </template>
          </el-menu-item>
        </el-submenu>
        <!--问题管理-->
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-shopping-bag-1"></i>
            <span>问题管理</span>
          </template>
          <!-- 二级菜单-->
          <el-menu-item index="/problemHt">
            <template slot="title">
              <i class="el-icon-caret-right"></i>
              <span>问题列表</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!--系统设置管理-->
        <!-- 					<el-submenu index="3">
						<template slot="title">
							<i class="el-icon-menu"></i>
							<span>系统设置</span>
						</template> -->
        <!-- 二级菜单-->
        <!-- 						<el-menu-item index="/editor">
							<template slot="title">
								<i class="el-icon-caret-right"></i>
								<span>富文本编辑器</span>
							</template>
						</el-menu-item> -->

        <!-- <el-menu-item index="/city">
							<template slot="title">
								<i class="el-icon-caret-right"></i>
								<span>选择城市</span>
							</template>
						</el-menu-item>
						<el-menu-item index="/charts">
							<template slot="title">
								<i class="el-icon-caret-right"></i>
								<span>图表</span>
							</template>
						</el-menu-item> -->
        <!-- </el-submenu> -->
      </el-menu>
    </el-aside>
    <el-container>
      <!--头部信息-->
      <el-header style="background-color: #242f41; height: 55px">
        <span class="head-title"
          ><b>&nbsp;&nbsp; 公务员报考服务系统后台管理</b></span
        >
        <el-dropdown
          split-button
          type="primar"
          style="margin-top: 0px"
          class="head-button"
        >
          <span class="el-icon-s-custom" type="info" v-model="admin">
            {{ admin.username }}</span
          >
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              ><span @click="updateDialogVisible = true"
                >修改密码</span
              ></el-dropdown-item
            >
            <el-dropdown-item
              ><span @click="logout">退出登录</span></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-dialog
        title="修改密码"
        :visible.sync="updateDialogVisible"
        width="50%"
        :before-close="close"
      >
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="旧密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              clearable=""
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
              clearable=""
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
              clearable=""
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 65px; margin-top: 30px">
            <el-button type="primary" @click="submitForm(ruleForm.checkPass)"
              >提交</el-button
            >
            <el-button type="info" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!--中间内容区域-->
      <el-main style="background-color: aliceblue">
        <!--路由占位符-->
        <router-view></router-view>
      </el-main>
      <!--底部版权所属-->
      <el-footer
        style="
          background-color: darkgray;
          text-align: center;
          color: aliceblue;
          font-size: 15px;
          height: 40px !important;
          padding: 10px 0px !important;
        "
      >
        <span> 该项目版权所属个人 </span>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import qs from "qs";
export default {
  data() {
    var validatePass3 = (rule, value, callback) => {
      setTimeout(() => {
        if (value === "") {
          callback(new Error("请输入旧密码"));
        } else {
          if (this.ruleForm.password !== this.admin.password) {
            callback(new Error("旧密码错误"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      setTimeout(() => {
        if (value === "") {
          callback(new Error("请输入新密码"));
        } else {
          if (value.length < 4 || value.length > 10) {
            callback(new Error("长度不对,请重新输入新密码"));
          } else if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
          }
          callback();
        }
      }, 1000);
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      admin: {
        id: "",
        name: "",
        sex: "",
        age: "",
        phone: "",
        role_id: "",
        username: "",
        password: "",
      },
      updateDialogVisible: false,
      ruleForm: {
        password: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        password: [
          {
            validator: validatePass3,
            trigger: "blur",
          },
        ],
        pass: [
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        checkPass: [
          {
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    close() {
      this.$refs.ruleForm.resetFields();
      this.updateDialogVisible = false;
    },
    //重置函数
    reset() {
      this.$refs.ruleForm.resetFields();
    },
    //退出登录
    logout() {
      //清空sessiontStorage中的数据
      window.sessionStorage.clear();
      //跳转页面
      this.$router.push("/index");
    },
    //修改密码
    submitForm(password) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.admin.password = password;
          var res2 = await this.$http.post(
            "updateAdmin",
            qs.stringify(this.admin)
          );
          if (res2.data.code == "200") {
            this.logout();
          } else {
            this.$message.error("密码修改失败！！！");
          }
        } else {
          console.log("数据有误！！！");
          return false;
        }
      });
    },
  },
  async mounted() {
    //2.动态的从sessionStorage中获取当前登录的用户编号
    var id = window.sessionStorage.getItem("id");
    console.log(id);
    var res = await this.$http.post("selectByID?id=" + id);
    if (res.data.code == "200") {
      this.admin = res.data.data;
    }
  },
};
</script>

<style scoped>
.head-title {
  font-size: 22px;
  display: inline-block;
  float: left;
  color: aliceblue;
  margin-top: 8px;
  margin-left: -18px;
}

/deep/.head-button {
  display: inline-block;
  float: right;
  margin-right: 25px;
  margin-top: 10px !important;
}

.el-aside {
  background-color: #324158;
}

.el-icon-s-custom {
  margin-top: -1px;
  height: 15px;
}
</style>
